<template>
    <section class="content-wrapper">
        <el-row :gutter="20" v-loading="loading" element-loading-text="拼命加载中">
            <el-col :span="24" class="cms-form-box">

                <el-row>
                    <el-col>
                        <el-form :inline="false" :model="form" ref="form" :rules="rules" v-loading="loading" label-width="150px">

                            <el-row :gutter="20">
                                <el-col :span="10">
                                    <el-form-item label="打开关注回复">
                                        <el-switch
                                                v-model="statusSwitch"
                                                active-color="#13ce66"
                                        @change="handleChangeStatus">
                                        </el-switch>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="10">
                                    <el-form-item label="回复文字内容">
                                        <el-input
                                                type="textarea"
                                                :autosize="{ minRows: 2, maxRows: 4}"
                                                placeholder="请输入内容"
                                                v-model="form.reply"
                                                :disabled="replyDisabled">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="10">
                                    <el-form-item label="模板类型">
                                        <el-select
                                                clearable
                                                v-model="form.templateType"
                                                placeholder="请选择"
                                                @change="handleChangeTemplate"
                                                style="width: 467px">
                                            <el-option
                                                    v-for="item in templateTypeOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                        <el-button :disabled="disabledAssign" type="primary" @click="handleAssignDialog">关 联</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20" v-if="templateName">
                                <el-col :span="10">
                                    <el-form-item label="模板内容">
                                        {{templateName}}
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-form-item>
                                <el-button type="primary" @click="update">保 存</el-button>
                            </el-form-item>

                        </el-form>
                    </el-col>
                </el-row>

            </el-col>

        </el-row>

        <el-dialog title="关联内容" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" @close="handleDialogClose">

            <div class="filter-wrapper">
                <el-form ref="filterForm" :model="listQuery" :inline="true">
                    <el-form-item prop="title" size="medium">
                        <el-input v-model="listQuery.title" placeholder="标题"></el-input>
                    </el-form-item>

                    <el-button type="primary" size="medium" icon="el-icon-search" @click="handleFilter">搜索</el-button>
                    <el-button type="primary" size="medium" icon="el-icon-mars-reset" @click="handleResetFilter">重置</el-button>
                </el-form>
            </div>

            <el-table
                    :data="list"
                    border fit
                    highlight-current-row
                    v-loading="listLoading"
                    @row-click="handleClickRowTemplate"
                    element-loading-text="给我一点时间">

                <el-table-column
                        type="selection"
                        width="55" align="center">
                </el-table-column>
                <el-table-column type="index" width="55" align="center"></el-table-column>


                <el-table-column label="标题" align="center">
                    <template slot-scope="scope"> {{scope.row.title}} </template>
                </el-table-column>

            </el-table>

            <div v-show="!listLoading" class="pagination-container">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="listQuery.page"
                        :page-sizes="[10, 20, 30, 50]"
                        :page-size="listQuery.rows"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAssign">确 定</el-button>
            </span>
        </el-dialog>

    </section>
</template>

<script>
    import { updated, loadSubscribe } from '@/api/weixin/subscribe'
    import { selectOne as selectOneText, selectList as selectTextList } from '@/api/weixin/text'
    import { selectOne as selectOneArticle, selectList as selectArticleList } from '@/api/weixin/article'
    import { selectOne as selectOneArticles, selectList as selectArticlesList } from '@/api/weixin/articleGroup'

    const templateTypeOptions = [
        {value: 'text', label: '文本消息'},
        {value: 'article', label: '单图文消息'},
        {value: 'articles', label: '多图文消息'}
    ]

    export default {
        name: 'WeixinSubscribe',
        data() {
            return {
                loading: false,
                form: {
                    id: null,
                    reply: null,
                    status: 2,
                    templateType: null,
                    templateId: null,
                    params: null
                },
                rules: {},
                statusSwitch: true,
                templateTypeOptions,
                list: [],
                total: null,
                listLoading: false,
                multipleSelection: [],
                listQuery: {
                    page: 1,
                    rows: 10,
                    title: undefined,
                },
                disabledAssign: true,
                dialogFormVisible: false,
                templateName: null,
                replyDisabled: false
            }
        },
        created() {
            this.handleLoadSubscribe()
        },
        methods: {

            handleLoadSubscribe() {
                this.loading = true
                loadSubscribe().then(response => {
                    Object.assign(this.form, response.data)
                    this.statusSwitch = this.form.status === 1 ? true : false

                    if(this.form.templateType) {
                        this.disabledAssign = false
                        this.replyDisabled = true
                    }
                    if(this.form.templateType === 'text') {
                        this.getTextData()
                    } else if(this.form.templateType === 'article') {
                        this.getArticleData()
                    } else if(this.form.templateType === 'articles') {
                        this.getArticlesData()
                    }

                    this.loading = false
                })
            },

            handleChangeStatus(value) {
                if(value) {
                    this.form.status = 1
                } else {
                    this.form.status = 2
                }
                this.loading = true
                updated(this.form).then(response => {
                    if(response.data.status) {
                        this.$notify({
                            title: '成功', message: response.data.message,
                            type: 'success', duration: 2000
                        })
                    } else {
                        this.$notify({
                            title: '发生错误', message: response.data.message,
                            type: 'error', duration: 2000
                        })
                    }
                    this.loading = false
                })
            },

            update() {//修改数据
                if(this.form.templateType) {
                    if(this.form.templateId == null || this.form.templateId === '') {
                        this.$notify({
                            title: '提示', message: '未关联内容',
                            type: 'warning', duration: 2000
                        })
                        return
                    }
                }
                this.loading = true
                this.$refs['form'].validate((valid) => {
                    if(valid) {
                        updated(this.form).then(response => {
                            if(response.data.status) {
                                this.$notify({
                                    title: '成功', message: response.data.message,
                                    type: 'success', duration: 2000
                                })
                            } else {
                                this.$notify({
                                    title: '发生错误', message: response.data.message,
                                    type: 'error', duration: 2000
                                })
                            }
                            this.loading = false
                        })
                    }
                })
            },

            handleFilter() {//条件过滤
                this.listQuery.page = 1

                if(this.form.templateType === 'text') {
                    this.getTextTableData()
                } else if(this.form.templateType === 'article') {
                    this.getArticleTableData()
                } else if(this.form.templateType === 'articles') {
                    this.getArticlesTableData()
                }
            },
            handleResetFilter() {//重置过滤条件
                this.$refs.filterForm.resetFields()

                if(this.form.templateType === 'text') {
                    this.getTextTableData()
                } else if(this.form.templateType === 'article') {
                    this.getArticleTableData()
                } else if(this.form.templateType === 'articles') {
                    this.getArticlesTableData()
                }
            },
            handleSizeChange(val) {
                this.listQuery.rows = val
                if(this.form.templateType === 'text') {
                    this.getTextTableData()
                } else if(this.form.templateType === 'article') {
                    this.getArticleTableData()
                } else if(this.form.templateType === 'articles') {
                    this.getArticlesTableData()
                }
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                if(this.form.templateType === 'text') {
                    this.getTextTableData()
                } else if(this.form.templateType === 'article') {
                    this.getArticleTableData()
                } else if(this.form.templateType === 'articles') {
                    this.getArticlesTableData()
                }
            },
            handleClickRowTemplate(row) {
                this.form.templateId = row.id
            },
            handleAssign() {
                this.dialogFormVisible = false

                if(this.form.templateType === 'text') {
                    this.getTextData()
                } else if(this.form.templateType === 'article') {
                    this.getArticleData()
                } else if(this.form.templateType === 'articles') {
                    this.getArticlesData()
                }
            },
            handleAssignDialog() {
                this.dialogFormVisible = true

                if(this.form.templateType === 'text') {
                    this.getTextTableData()
                } else if(this.form.templateType === 'article') {
                    this.getArticleTableData()
                } else if(this.form.templateType === 'articles') {
                    this.getArticlesTableData()
                }
            },
            getTextData() {
                if(this.form.templateId) {
                    selectOneText(this.form.templateId).then(response => {
                        this.templateName = response.data.title
                    })
                }
            },
            getArticleData() {
                if(this.form.templateId) {
                    selectOneArticle(this.form.templateId).then(response => {
                        this.templateName = response.data.title
                    })
                }
            },
            getArticlesData() {
                if(this.form.templateId) {
                    selectOneArticles(this.form.templateId).then(response => {
                        this.templateName = response.data.title
                    })
                }
            },
            getTextTableData() {
                this.listLoading = true
                selectTextList(this.listQuery).then(response => {
                    this.list = response.data.list
                    this.total = response.data.total
                    this.listLoading = false
                }).catch(error => {
                    console.log(error)
                    this.listLoading = false
                })
            },
            getArticleTableData() {
                this.listLoading = true
                selectArticleList(this.listQuery).then(response => {
                    this.list = response.data.list
                    this.total = response.data.total
                    this.listLoading = false
                }).catch(error => {
                    console.log(error)
                    this.listLoading = false
                })
            },
            getArticlesTableData() {
                this.listLoading = true
                selectArticlesList(this.listQuery).then(response => {
                    this.list = response.data.list
                    this.total = response.data.total
                    this.listLoading = false
                }).catch(error => {
                    console.log(error)
                    this.listLoading = false
                })
            },
            handleDialogClose() {//关闭窗口回调函数
                this.list = null
                this.total = null
            },
            handleChangeTemplate(value) {
                if(value === '') {
                    this.form.templateId = null
                    this.templateName = null
                    this.disabledAssign = true
                    this.replyDisabled = false
                } else {
                    this.disabledAssign = false

                    this.form.reply = null
                    this.replyDisabled = true
                }
            }

        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>